<template>
  <div style="height: 100%" class="workspace">
    <div ref="listWarp" style="height: 100%; background-color: #fff">
      <div class="left_list" id="left_list">
        <!-- 主贴 -->
        <div class="comment">
          <div class="comment_top">
            <div>
              <span class="complain" v-if="mainDetail.serverType == '0'"
                >投诉</span
              >
              <span class="suggest" v-if="mainDetail.serverType == '1'"
                >建议</span
              >
              <span class="consult" v-if="mainDetail.serverType == '2'"
                >咨询</span
              >
              <span class="praise" v-if="mainDetail.serverType == '3'"
                >表扬</span
              >
              <span class="canteen" style="font-weight: 600">{{
                mainDetail.postTitle
              }}</span>
            </div>
            <span class="state_0" v-if="mainDetail.status == '3'">已驳回</span>
            <span class="state_1" v-else-if="mainDetail.official.length > 0"
              >已回复</span
            >
            <span class="state_0" v-else>未回复</span>
          </div>

          <div class="text-box">
            <div class="bottom">
              <div class="icon_text">
                <div>
                  <img src="@/assets/image/icon_ren.png" mode />
                  <span>{{ mainDetail.createName }}</span>
                </div>
                <div
                  class="comment_time"
                  style="display: flex; align-items: center"
                >
                  <img src="@/assets/image/icon_time.png" alt />
                  <span space="emsp">{{ mainDetail.createTime }}</span>
                </div>
              </div>
              <span class="icon_text">
                <img src="@/assets/image/icon_location.png" class="location" />
                <span>{{ mainDetail.serviceScopeName }}</span>
              </span>
            </div>
            <div class="zan">
              <div>
                <img src="@/assets/image/icon_read.png" class="location" />
                <span>浏览({{ mainDetail.clicks }})</span>
              </div>
              <div class="icon_text">
                <img src="@/assets/image/icon_comment.png" class="location" />
                <span>评论({{ mainDetail.replyCount }})</span>
              </div>
              <div class="icon_text">
                <img src="@/assets/image/icon_zan.png" class="location" />
                <span>点赞({{ mainDetail.likeCount }})</span>
              </div>
            </div>
          </div>
          <div class="comment_content">{{ mainDetail.content }}</div>
          <div class="imgShow" v-if="mainDetail.images">
            <div
              @click="privew(mainDetail)"
              class="image_div"
              :data-background="value"
              :style="
                'background: url(' +
                value +
                ') center no-repeat;background-size: contain;'
              "
              v-for="(value, index) in mainDetail.images"
              :key="index"
            ></div>
          </div>
        </div>
        <!-- 子贴列表 -->
        <div class="guan_genList" v-if="genDetail && genDetail.length > 0">
          <div v-if="type == '1'" style="margin: 20px 0; font-weight: 600">
            官方回复
          </div>
          <div v-if="type == '2'" style="margin: 20px 0; font-weight: 600">
            我的评论
          </div>
          <!-- 用状态做判断 -->
          <div
            class="gen_comment"
            v-for="(item, index) in genDetail"
            :key="index"
          >
            <div class="comment_top">
              <div class="left icon_text">
                <img
                  src="@/assets/image/icon_moren.png"
                  style="margin-right: 8px; border-radius: 50%"
                />
                <span v-if="type == '1'"
                  >【官方回复】{{ item.replyUserName }}</span
                >
                <span v-if="type == '2'">{{ item.replyUserName }}</span>
              </div>
              <div class="icon_text">
                <img
                  src="@/assets/image/icon_time.png"
                  alt
                  style="margin-right: 10px; top: 0"
                />
                <span style="color: #656565">{{
                  item.createTime.substring(0, 16)
                }}</span>
              </div>
            </div>
            <div
              class="gen_bottom"
              style="padding-left: 35px; padding-bottom: 20px"
            >
              <div style="margin-top: 8px">{{ item.content }}</div>
              <div class="icon_text" style="margin-top: 10px">
                <img src="@/assets/image/icon_zan.png" class="location" />
                <span style="margin-left: 8px">点赞({{ item.likeCount }})</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { superviseApi } from "@/api/home/supervise.js";
export default {
  data() {
    return {
      id: "",
      type: "",
      mainDetail: {},
      genDetail: [],
    };
  },
  methods: {
    //图片预览
    privew(item) {
      window.open(item.images, "_blank");
    },
  },
  created() {},
};
</script>


<style lang="scss" scoped>
.left_list {
  background-color: #fff;
  border-radius: 4px;
  .comment {
    border-bottom: 1px solid #f1f1f1 !important;
    margin-right: 15px;
  }
}

a {
  text-decoration: none;
}
.page-footer {
  border: 0px solid #e3e8ee;
}
.icon_text {
  display: flex;
  align-items: center;
}
.officalBoxText[data-v-7ac4ea84] {
  padding-left: 0;
}
/* 列表样式 */
.left_list .comment {
  padding: 10px 0 20px;
  border-bottom: 1px dashed #f1f1f1 !important;
}
.left_list .comment:last-child {
  border-bottom: 0;
}
.guan_genList {
  margin-right: 15px;
}
.comment .bottom .location {
  top: -1px;
}
.comment_top .suggest {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #e7f0ff;
  color: #3080ff;
  border-radius: 4px;
}
.comment_top .complain {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #ffe7e7;
  color: #f04242;
  border-radius: 4px;
}
.comment_top .consult {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #ffe8ca;
  color: #955f18;
  border-radius: 4px;
}
.comment_top .praise {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #cdf3da;
  color: #2d9f55;
  border-radius: 4px;
}
.comment_top .canteen {
  margin-left: 11px;
  color: #000000;
  font-size: 15px;
  font-weight: blod;
}
.comment_top .state_1 {
  font-size: 12px;
  width: 56px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #666666;
}
.comment_top {
  display: flex;
  justify-content: space-between;
}
.comment_top .state_0 {
  font-size: 12px;
  width: 56px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border: 1px solid #f47c48;
  border-radius: 4px;
  color: #eb4e09;
}

.comment_content {
  margin-top: 20px;
  color: #333333;
  font-size: 14px;
}

.comment .bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}
.comment .bottom .icon_text {
  display: flex;
  text-align: center;
}

.comment .bottom .icon_text:last-child {
  text-align: right;
}

.comment .bottom .comment_time {
  margin-left: 15px;
  margin-right: 25px;
  display: flex;
  align-items: center;
}
.comment .bottom .icon_text img {
  position: relative;
  bottom: -3px;
  left: 0;
  margin-right: 10px;
  width: 14px;
  height: 15px;
}

.comment .bottom .icon_text div {
  font-size: 14px;
}

.comment .zan {
  color: #999999;
  font-size: 12px;
  display: flex;
  /* margin-top: 5px; */
}
.comment .zan > div {
  margin-right: 40px;
  line-height: 16px;
  display: flex;
  align-items: center;
}

.comment .zan div img {
  margin-right: 10px;
}
.comment .zan div:last-child {
  margin-right: 0px;
}

.imgShow {
  margin-top: 16px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
}
.image_div {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ededed;
  cursor: pointer;
}
.officalBox {
  box-sizing: border-box;
  padding: 20px;
  padding-left: 10px;
  padding-top: 15px;
  margin-top: 16px;
  position: relative;
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 6px;
}
.officalBoxTop {
  display: flex;
  justify-content: space-between;
}
.officalBoxText {
  padding-left: 10px;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  /* padding: 20px; */
  /* padding-bottom: 10px; */
}
.officalBoxTop .time {
  color: #878787;
}
.officalBox-content {
  height: 100%;
}
.officalBoxText span {
  line-height: 20px;
}
.text-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.text-box span {
  color: #656565;
}
.bottom .icon_span:first-child {
  float: left;
  height: auto;
  display: flex;
  font-size: 14px;
  align-items: center;
}
.bottom .icon_span div {
  display: flex;
  align-items: center;
}
.bottom .icon_span:last-child {
  float: right;
  display: flex;
  font-size: 14px;
  align-items: center;
}
.icon_span img {
  margin-right: 6px;
  width: 14px;
  height: 16px;
  display: inline-block;
}
.comment .bottom .comment_time {
  display: flex;
  align-items: center;
}
.comment .bottom .comment_time img {
  height: 14px;
  bottom: 0px;
}

.location {
  width: 14px !important;
  height: 16px;
}
.selects .push {
  float: right;
  width: 121px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  background: rgba(243, 75, 21, 1);
  border-radius: 16px;
  /* font-size:16px;
        font-family:Microsoft YaHei;
        color:rgba(254,254,254,1); */
}
.selects .push a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(254, 254, 254, 1);
}
// 列表样式end
::v-deep .el-pagination__total {
  margin: 0 15px;
}
</style>
